<template>
  <div class="top-box">
    <div class="logo-box">
      <img src="../assets/logo.png" alt="logo" />
      <span>cesium-api</span>
    </div>
    <cpcMenu :nav-menu="navMenu" :datas="datas"></cpcMenu>
  </div>
</template>

<script lang="ts">
import { ref, reactive, watchEffect, defineComponent } from 'vue'
import cpcMenu from './cpcMenu/cpcMenu.vue';
import { useRoute } from "vue-router"
import router from '../router';
export default defineComponent({
  name: 'topNav',
  components: {
    cpcMenu
  },
  props: {
  },
  setup: () => {
    const route = useRoute();
    const navMenu = reactive({
      props: {
        router: true,
        mode: "horizontal",
      },
      activeIndex: "/Home"
    })
    const datas = reactive(
      [
        {
          value: "/Home",
          title: "首页"
        },
        {
          value: "/devGuide",
          title: "开发指南"
        },
        {
          value: "/devDoc",
          title: "开发文档"
        },
        {
          value: "/example",
          title: "demo"
        },
        {
          value: "/sceneExample",
          title: "场景示例"
        },
        {
          value: "/Editor?example=00_base",
          title: "在线编辑"
        }
      ]
    )

    watchEffect(() => {
      navMenu.activeIndex = route.path
    })

    return { navMenu, datas }
  }
})
</script>

<style lang="less">
@import url("../styles/var.less");

.top-box {
  width: 100%;
  height: 0.61rem;
  display: flex;
  border-bottom: 0.01rem solid @cr-line-base;
  .logo-box {
    display: flex;
    align-items: center;
    flex: 1;
    > img {
      height: 80%;
      padding: 0 0.2rem;
    }
    > span {
      float: left;
      font-size: 0.16rem;
      font-weight: 800;
    }
  }
  .menu-box {
  }
}
</style>
